<template>
	<view class="tabs-wrap">
		<view style="position: relative;">
			<ListTools style="display: flex;" :total="count" :sedate="{st: stime, et: etime}" @selDate="selAlSeDate">

			</ListTools>
			<view style="display: flex;align-items: center;" class="other-btns">
				<view style="width: 60vw;background-color: #FFF;" >
					<!-- <u-search @change='queryList()' bg-color='#fff' shape='square' :show-action='false' :placeholder="placeholder"
						v-model="details"></u-search> -->
					<u-input @input='queryList()' v-model="details" :border="true"  :custom-style="{'backgroundColor': '#fff'}"  :placeholder="placeholder"/>
				</view>
				<view style="width: 40vw;margin-left: 20rpx;">
					<label class="lt-obtn" :class="{'lt-obtn-sel':findDay == 0}"
						@click="findDgByDay('0')">今天</label>
							
					<label class="lt-obtn" :class="{'lt-obtn-sel':findDay == 1}"
						@click="findDgByDay('1')">明天</label>
							
					<label class="lt-obtn" :class="{'lt-obtn-sel': findDay == 2}"
						@click="findDgByDay('2')">后天</label>
				</view>
			</view>
			<!-- <view @click="routeSimpleName_btn" class="routeSimpleName">{{routeSimpleName}}
				<u-icon name="arrow-down-fill" size="20"></u-icon>
			</view> -->
		</view>

		<scroll-view :scroll-top="scrollTop" @scroll="scroll" style="height: 62vh;width: 100%;" scroll-y
			@scrolltolower="tabReachBottom" :refresher-enabled="true" :refresher-threshold="80"
			:refresher-background="'#efefef'" :refresher-triggered="load.triggered" @refresherrefresh="downPullRefres">
			<view class="my-list">
				<view class="no-data" v-if="dataList.length == 0"><u-empty text="没有订单数据" mode="list"></u-empty></view>
				<template v-else>
					<view class="ml-item" v-for="(it, index) in dataList" :key="it.id">
						<view class="i-title-row">
							<!-- <view class="check-state-text" :style="{'color': '#fff', 'background': 'red'}">
								{{it.status=='NOT_GRAB'?'未抢单':it.status=='READY_CAR'?'未派车':'状态'}}
							</view> -->

							<view class="r-title">
							<u-button v-if="it.isTrusteeOrder == 1" style="margin-right: 10rpx;" shape="square" type="error"
								size="mini" >托</u-button>
							{{it.routeSimpleName}} <text style="margin-left: 30rpx;color: red;">
									{{ it.status == 'NOT_GRAB' ? '未抢单' : it.status == 'READY_CAR' ? '未派车' :
								                                            it.status
								                                                ==
								                                                'CAR_READY_CONFIRME' ? '未通知' : it.status == 'DRIVER_READY_RECEIVE' ? '师傅未确认' :
								                                                it.status ==
								                                                    'DRIVER_CONFIRMED'
								                                                    ? '师傅已确认' : it.status == 'START_TAKE_CUS' ? '出发去接客户' : it.status ==
								                                                        'ON_ROADING' ?
								                                                        '已出行' :
								                                                        it.status == 'FINISHED' ? '已完团' : it.status == 'CANCELED' ? '已取消' : it.status
								                                                            ==
								                                                            'REFUSED'
								                                                            ?
								                                                            '已拒绝' : it.status == 'DELETE' ? '已删除' : '其他' }}
								</text> </view>
							<u-button v-if="it.isBaitui == 1" style="margin-right: 10rpx;" shape="square" type="error"  size="mini" >百推</u-button>
							
							<u-button v-if="it.accidentRecord" style="margin-right: 10rpx;" shape="square" type="error"  size="mini" @click="showBzDetail(it.id)">异</u-button>
							
							<view class="r-detail-btn" @click="showBzDetail(it.id)">详情
								<u-icon name="arrow-right" color="#666"></u-icon>
							</view>

						</view>
						<view class="content">
							<view class="title" v-html="it.details"></view>
						</view>
						<view style="font-weight: 700;">
							<!-- {{it.cusName+'-'+it.cusMobile}} -->
							<view style='color: #4749a0;'>客户信息:{{it.cusInfo}}
								<text :style="it.regularCarMoney >0?'color: red':'color: #4749a0'">({{it.personNum}}人</text>
								<text :style="it.regularCarMoney >0?'color: red':'color: #4749a0'">/{{it.needSeats}}座)</text>
							</view>
						</view>
						<view v-if='it.driverName' style="font-weight: 700;">
							<view style='color: #ff5722;'>车辆信息:{{it.driverName+'-'+it.driverPhone}}
								<text style="color: red;">【{{it.plateNum}}】</text>
							</view>
						</view>
						<view v-if="isTrustee==0" class="bottom">

							<view v-if="index == 0" :style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
								@click="btn_car2(it)">
								合并订单
							</view>
							<view :style="{'border-color': '#008000', 'color': '#008000'}" class="btn"
								@click="btn_car(it)">
								线下派车
							</view>
							<view :style="{'border-color': '#5500ff', 'color': '#5500ff'}" class="btn"
								@click="btn_car3(it)">
								线上派车
							</view>
						</view>
					</view>

					<u-loadmore :status="load.status" :load-text="load.loadText" bgColor="#f2f2f2"></u-loadmore>
				</template>

			</view>
		</scroll-view>
		<u-action-sheet @click='routeSimpleName_sheet' :list="routeSimpleName_list"
			v-model="routeSimpleName_show"></u-action-sheet>
		<u-modal show-cancel-button="true" v-model="show" :content="'确认已接到乘客?'" @confirm="ok_Btn"></u-modal>
	</view>
</template>

<script>
	import ListTools from '@/components/list-tools/list-tools.vue';
	export default {
		components: {
			ListTools,
		},
		data() {
			return {
				findDay:-1,
				data: {},
				show: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 开始时间
				stime: this.getMonthFirstDay(),
				// 结束时间
				etime: this.getMonthLastDay(),
				dataList: [],
				count: 0,
				// 列表加载更多对象
				routeSimpleName_show: false,
				routeSimpleName_list: [{
						text: '拼车接天府'
					},
					{
						text: '拼车送天府'
					},
				],
				routeSimpleName: '拼车接天府',
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				details:'',
				placeholder: '请输入搜索关键字',
				load: this.U.scopy(this.C.loadmore),
				isTrustee: 0,
			}
		},
		onLoad(e) {
			console.log(e)
		},
		mounted() {
			// 查询
			this.queryList();
			this.isTrustee = uni.getStorageSync('isTrustee');
		},
		methods: {
			// 查询指定天数的数据
			findDgByDay(day) {
				let that = this
				let	U = that.U
				if (that.findDay == day) {
					// 再次点击则取消
					that.findDay = -1;
			
					that.stime = that.getMonthFirstDay(),
					that.etime = that.getMonthLastDay(),
			
					that.downPullRefres();
				} else {
					that.findDay = day;
					that.stime = U.getSEToday(day)[0];
					that.etime = U.getSEToday(day)[1];
					that.downPullRefres();
				}
			},
			getMonthFirstDay(){
				// 获取当前日期
				let currentDate = new Date();
				
				// 提取年月日部分
				let year = currentDate.getFullYear();
				let month = String(currentDate.getMonth() + 1).padStart(2, '0');
				let day = String(currentDate.getDate()).padStart(2, '0');
				
				let todayString = `${year}-${month}-${day}`;
				let data = todayString + ' ' + '00:00:00'
				return data
			},
			getMonthLastDay(){
				// 获取当前日期
				let currentDate = new Date();
				
				// 加上7天的毫秒数
				let nextWeekDate = new Date(currentDate.getTime() + 1 * 24 * 60 * 60 * 1000);
				
				// 提取年月日部分
				let year = nextWeekDate.getFullYear();
				let month = String(nextWeekDate.getMonth() + 1).padStart(2, '0');
				let day = String(nextWeekDate.getDate()).padStart(2, '0');
				
				let nextWeekDateString = `${year}-${month}-${day}`;
				let data = nextWeekDateString + ' ' + '23:59:59'
				console.log(data,'data')
				return data
			},
			routeSimpleName_btn() {
				this.routeSimpleName_show = true
			},
			routeSimpleName_sheet(e) {
				this.routeSimpleName = this.routeSimpleName_list[e].text
				// 重新查询
				this.queryList();
			},
			// 合并
			btn_car2(e) {
				uni.navigateTo({
					url: '/order-man/charter-a-car/received/merge?id=' + e.id+ '&type=' + '1'
				})
			},
			//线下派车
			btn_car(e) {
				uni.removeStorageSync('carCompanyId');
				uni.navigateTo({
					url: '/order-man/charter-a-car/received/offline-vehicle-dispatch?id=' + e.id+ '&type=' + '1'
				})
			},
			//线上派车
			btn_car3(e) {
				uni.navigateTo({
					url: '/order-man/charter-a-car/received/online-vehicle-dispatch?id=' + e.id + '&seats=' +
						e.needSeats+ '&type=' + '1'+'&startTime=' +e.startTime
				})
			},
			showBzDetail(e) {


				uni.navigateTo({
					url: '/order-man/order-detail/order-detail?id=' + e
				})
			},

			selAlSeDate(e) {
				// console.log('起止日期选择事件', e);

				this.stime = e.st;
				this.etime = e.et;

				// 重新查询
				this.queryList();
			},
			// 查询数据
			queryList(page) {
				let that = this

				// 存在，则表示刷新
				if (!page) {
					// 开始刷新
					that.load.triggered = true;
					that.page.pageNum = 1;
				}
				const params = {
					routeSimpleName: '拼车接天府',
					page: {
						pageNum: that.page.pageNum,
						pageSize: that.page.pageSize,
					},
					follow: "",
					beReceived: true,
					statusList: ['READY_CAR'],
					stime: that.stime,
					etime: that.etime,
					timeType: '0',
					orderByCondition:'0',
					details:that.details,
				}
				that.$u.api.getOrderGroupCarList(params).then(res => {
					// 第一页的时候，停止刷新
					if (!page) {
						// 停止刷新
						that.load.triggered = false;
						// 刷新则清空列表
						that.dataList = [];
					}
					if (res.code == 1) {
						if (res.data.total > res.data.list.length) {
							let dataList = res.data.list
							// 追加数据
							that.dataList = that.dataList.concat(dataList);
							that.count = res.data.total
							// 设置加载状态
							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						} else {
							let dataList = res.data.list
							// 追加数据
							that.dataList = dataList
							that.count = res.data.total
							// 设置加载状态
							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						}

					}
				});
			},
			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				let that = this
				// 解决view层不同步的问题

				that.scrollTop = that.old.scrollTop

				that.$nextTick(function() {
					that.scrollTop = 0

				});


			},
			// 设置-底部上滑加载数据时状态显示
			tabReachBottom() {
				let that = this;

				// 数据已经加载完
				if (that.dataList.length == that.dataList.total) {
					// 设置加载状态为：没有更多了
					that.load.status = 'nomore';
				} else {
					// 设置加载状态为：加载中...
					that.load.status = 'loading';
					// 增加一页页码
					that.page.pageNum++;
					that.queryList(1);
				}
			},
			// 下拉刷新
			downPullRefres() {
				console.log(111)
				// 重新查询
				this.queryList();
			},
		}
	}
</script>

<style lang="scss">
	.routeSimpleName {
		position: absolute;
		left: 380rpx;
		width: 200rpx;
		background: #fff;
		top: 10rpx;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
		border: 1px solid #00C3CE;
		color: #00C3CE;
		margin-right: 10rpx;
	}

	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}

	.content {
		.title {
			font-size: 28rpx;
			line-height: 50rpx;
		}

		.type {
			margin: 10rpx 0;
			font-size: 24rpx;
			color: $u-tips-color;

			.service-type {
				float: right;
			}
		}

		.delivery-time {
			color: #e5d001;
			font-size: 24rpx;
		}
	}

	.check-state-text {
		display: inline-block;
		padding: 0rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}

	.tabs-wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		overflow-y: hidden;

		.tab-swiper-box {
			flex: 1;

			.tab-swiper-item {
				height: 100%;

				.page-box {
					padding-bottom: 80rpx;
				}
			}
		}
	}

	.list-tools {
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		position: absolute;
		top: 180rpx;
		right: 0rpx;
		z-index: 99;

		.find-date {
			margin-right: 20rpx;
		}
	}
</style>